<template>
    <div>
        <div class="bill">
            <input type="text"  readonly placeholder="选择查看日期" @click="showPicker2 = true" class="inputpicker" v-model="limittime"/>
            <van-popup v-model="showPicker2" position="bottom">
                <van-datetime-picker type="date" title="选择年月日" :min-date="minDate" :max-date="maxDate" @confirm="onConfirmLimittime"/>
            </van-popup>
            <ul class="srmx active">
                <div class="srmx-box">
                    <div class="time">{{order.date}}&nbsp;&nbsp;{{order.week}}</div>
                    <div class="right">总收益<span>￥{{order.ordermoney}}</span>
                        <!--<img style="width: 12px;height: 12px" src="../../assets/img/money_icon.png"/>-->
                    </div>
                </div>
                <div class="tag_1">
                    <p>普通订单</p>
                    <span>共<font>{{order.ordertotal}}</font>个</span>
                    <img src="../../assets/img/icontag.png">
                </div>
                <li v-for="(item, index) in order.orderlist">
                    <div class="left">
                        <p class="p1">{{item.materialstitle}}</p>
                        <p class="p5"><img :src="item.avatar"><span>{{item.nickname}} </span></p>
                    </div>
                    <div class="right">
                        <p class="p2 active">+￥{{item.money}}
                            <!--<img style="width: 12px;height: 12px" src="../../assets/img/money_icon.png"/>-->
                        </p>
                        <p class="p4">{{item.createtime}}</p>
                    </div>
                </li>
                <span class="point-out">已显示完全部</span>
            </ul>
            <ul class="srmx" v-for="(item,index) in monthdata" @click="todetail(item.date)">
                <div class="srmx-box">
                    <div class="time">{{item.date}}&nbsp;&nbsp;{{item.week}}</div>
                    <div class="right">总收益<span>￥{{item.earnings}}</span>
                        <!--<img style="width: 12px;height: 12px" src="../../assets/img/money_icon.png"/>-->
                    </div>
                </div>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "",
        data(){
            return {
                showPicker2:false,
                limittime:"",
                minDate: new Date(2020, 0, 1),
                maxDate:new Date(),
                monthdata:"",
                order:""
            }
        },
        mounted(){
            var oDate=new Date();
            this.limittime=oDate.getFullYear()+'-'+this.formatZero(parseInt(oDate.getMonth()+1),2)+'-'+oDate.getDate();
            this.getList(oDate.getFullYear(),this.formatZero(parseInt(oDate.getMonth()+1),2),oDate.getDate())
        },
        methods:{
            todetail(date){
                this.limittime=date;
                this.getList(date.substr(0,4),date.substr(5,2),date.substr(8,2))
            },
            formatZero(num, len) {
                if(String(num).length > len) return num;
                return (Array(len).join(0) + num).slice(-len);
            },
            //选择限时查看时间
            onConfirmLimittime(val){
                let year = val.getFullYear();
                let month = val.getMonth() + 1
                let day = val.getDate()
                let hour = val.getHours()
                let minute = val.getMinutes()
                if (month >= 1 && month <= 9) { month = `0${month}` }
                if (day >= 1 && day <= 9) { day = `0${day}` }
                if (hour >= 0 && hour <= 9) { hour = `0${hour}` }
                if (minute >= 0 && minute <= 9) { minute = `0${minute}` }
                this.limittime=`${year}-${month}-${day}`;
                this.showPicker2=false;
                this.getList(`${year}`,`${month}`,`${day}`)
            },
            getList(year,month,day){
                var that=this;

                that.request1.post1({
                    url: that.Url + "api/user.index/myEarnings",
                    params: {year:year,month:month,day:day},
                    success: function (res) {
                        console.log(res)
                        if (res.data.code == 1) {
                            that.monthdata=res.data.data.monthdata;
                            that.order=res.data.data.order;
                        } else {
                            alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        alert(error.data.msg)
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .bill {
        padding-bottom: 100px;
    }
    .bill ul {
        display: block;
        overflow: hidden;
    }
    .bill ul.srmx {
        margin: 10px 5px 0;
        border-radius: 8px;
        overflow: hidden;
        height: 55px;
    }
    .bill ul.active {
        height: auto;
        overflow: none;
        background: #fff;
    }
    .bill ul.srmx .srmx-box {
        height: 55px;
        background: #fff;
        margin-bottom: 1px;
    }
    .bill ul.srmx .srmx-box .time {
        display: block;
        float: left;
        padding-left: 25px;
        background: url() no-repeat 0;
        background-size: 18px;
        margin-left: 10px;
        height: 55px;
        line-height: 55px;
        font-weight: 700;
        font-size: 16px;
    }
    .bill ul.srmx.active .srmx-box .time {
        display: block;
        float: left;
        padding-left: 25px;
        background: url() no-repeat 0;
        background-size: 18px;
        margin-left: 10px;
        height: 55px;
        line-height: 55px;
        font-weight: 700;
        font-size: 16px;
    }
    .bill ul.srmx .srmx-box .left, .bill ul.srmx .srmx-box .right {
        display: block;
        float: right;
        line-height: 55px;
        color: #666;
    }
    .bill ul.srmx .srmx-box .right {
        padding-left: 10px;
        padding-right: 10px;
    }
    .bill ul.srmx .srmx-box .left span, .bill ul.srmx .srmx-box .right span {
        font-size: 14px;
        color: #fc5d4d;
        font-weight: 700;
        padding: 0 3px;
    }
    .bill ul.srmx .tag_1 {
        padding-right: 20px;
        height: 19px;
        background: #fc5d4d;
        display: inline-block;
        position: relative;
    }
    .bill ul.srmx .tag_1 img, .bill ul.srmx .tag_1 p, .bill ul.srmx .tag_1 span {
        display: block;
        float: left;
        font-size: 13px;
        line-height: 19px;
        color: #fff;
    }
    .bill ul.srmx .tag_1 p {
        padding-left: 10px;
    }
    .bill ul.srmx .tag_1 span {
        padding-left: 15px;
    }
    .bill ul.srmx .tag_1 span font {
        color: #fffc00;
        font-weight: 700;
        padding: 0 2px;
    }
    .bill ul.srmx .tag_1 img {
        position: absolute;
        right: -10px;
        top: 0;
        height: 19px;
    }
    .bill ul li {
        display: block;
        background: #fff;
        display: -webkit-box;
        border-bottom: .5px solid #efeff4;
        padding: 5px 15px;
    }
    .bill ul li .left {
        -webkit-box-flex: 1;
        padding-bottom: 2px;
    }
    .bill ul li .left .p1 {
        display: block;
        font-size: 13px;
        line-height: 20px;
        margin-bottom: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .bill ul li .left .p5 {
        height: 25px;
    }
    .bill ul li .left .p5 img {
        height: 25px;
        width: 25px;
        border-radius: 50px;
        float: left;
    }
    .bill ul li .left .p5 span {
        display: block;
        height: 25px;
        line-height: 25px;
        padding-left: 5px;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .bill ul li .right {
        width: 110px;
        text-align: right;
        padding-top: 5px;
    }
    .bill ul li .right .p2 {
        font-size: 14px;
        font-weight: 700;
        color: #f9883c;
    }
    .bill ul li .right .p2.active {
        font-size: 14px;
        font-weight: 700;
        color: #fc5d4d;
    }
    .bill ul li .right .p4 {
        font-size: 12px;
        color: #b9b9b9;
        padding-top: 2px;
    }
    .bill ul.active span.point-out {
        text-align: center;
        font-size: 12px;
        color: #999;
        display: block;
        line-height: 30px;
    }
    .inputpicker{
        width: calc(100% - 10px);
        margin:10px auto 0;
        box-sizing: border-box;
    }
</style>